// 响应式混合宏
@mixin desktop-large {
    @media (min-width: 1440px) {
      @content;
    }
  }
  
  @mixin desktop {
    @media (min-width: 1200px) and (max-width: 1439px) {
      @content;
    }
  }
  
  @mixin laptop {
    @media (min-width: 992px) and (max-width: 1199px) {
      @content;
    }
  }
  
  @mixin tablet {
    @media (min-width: 768px) and (max-width: 991px) {
      @content;
    }
  }
  
  @mixin mobile {
    @media (max-width: 767px) {
      @content;
    }
  }
  
  @mixin mobile-small {
    @media (max-width: 480px) {
      @content;
    }
  }
  
  // 常用的响应式辅助类
  .hide-on-mobile {
    @include mobile {
      display: none !important;
    }
  }
  
  .hide-on-tablet {
    @include tablet {
      display: none !important;
    }
  }
  
  .show-on-mobile {
    display: none !important;
    
    @include mobile {
      display: block !important;
    }
  }
  
  .show-on-tablet {
    display: none !important;
    
    @include tablet {
      display: block !important;
    }
  }
  
  // 响应式容器
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    
    @include mobile {
      padding: 0 20px;
    }
  }
  
  // 响应式间距辅助类
  .mb-mobile-sm {
    @include mobile {
      margin-bottom: 1rem !important;
    }
  }
  
  .mb-mobile-md {
    @include mobile {
      margin-bottom: 2rem !important;
    }
  }
  
  .mb-mobile-lg {
    @include mobile {
      margin-bottom: 3rem !important;
    }
  }
  
  // 响应式文本对齐
  .text-center-mobile {
    @include mobile {
      text-align: center !important;
    }
  }
  
  .text-left-mobile {
    @include mobile {
      text-align: left !important;
    }
  }
  
  .text-right-mobile {
    @include mobile {
      text-align: right !important;
    }
  }